<template>
<div class="view-GoodList">
    <!-- 查询-查询条件 -->
    <div class="search-mod">
        <div class="s-item">
            <div class="s-item-l">
                <span>商品编号</span>
            </div>
            <div class="s-item-r">
                <el-input v-model="condiData.goodId" placeholder="请输入"></el-input>
            </div>
        </div>
        <div class="s-item">
            <div class="s-item-l">
                <span>商品名称</span>
            </div>
            <div class="s-item-r">
                <el-input v-model="condiData.goodName" placeholder="请输入"></el-input>
            </div>
        </div>
        <div class="s-item">
            <div class="s-item-l">
                <span>商品价格</span>
            </div>
            <div class="s-item-r">
                <el-input v-model="condiData.goodPrice" placeholder="请输入"></el-input>
            </div>
        </div>
        <div class="s-item">
            <div class="s-item-l">
                <span>单位</span>
            </div>
            <div class="s-item-r">
                <el-input v-model="condiData.goodUnit" placeholder="请输入"></el-input>
            </div>
        </div>
        <div class="s-item-btns">
            <div class="s-btns-l">
                <el-button type='primary' @click='showAddListItemWin'>新增</el-button>
            </div>
            <div class="s-btns-r">
                <el-button type='primary' @click='searchList'>查询</el-button>
                <el-button type='primary' @click='resetSearch'>重置</el-button>
            </div>
        </div>
    </div>
    
    <!-- 查询-列表 -->
    <div class="list-mod">
        <el-table :data="listData">
            <el-table-column
                prop="goodId"
                label="商品编号"
                width="180">
                <template slot-scope="scope">
                    <el-button @click="showDetailListItemWin(scope.row)" type="text">{{scope.row.goodId}}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="goodName"
                label="商品名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goodPrice"
                label="商品价格"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goodUnit"
                label="单位"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goodDesc"
                label="商品描述"
                width="180">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="showEditListItemWin(scope.row)" type="text">编辑</el-button>
                    <el-button @click="delListItem(scope.row)" type="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 查询-分页 -->
    <el-pagination
        @size-change="listPageSizeChange"
        @current-change="listPageChange"
        :current-page="pageData.pageCurrent"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
    </el-pagination>

    <GoodItemDialog :isEdit='isExampleItemEdit' :isReadonly='isExampleItemReadonly' :itemData='exampleItemData' @hideDialog='hideExampleItemDialog'></GoodItemDialog>
</div>
</template>

<script>
// @ is an alias to /src
import { post, get, request } from '@/common/service'
import GoodItemDialog from '@/javaviews/GoodItemDialog.vue'

export default {
    name: 'GoodList',
    components: {
        GoodItemDialog,
    },
    mounted () {
        this.searchList()
    },
    data () {
        return {
            // 单个模板-是否编辑模式
            isExampleItemEdit: false,
            // 单个模板-是否只读
            isExampleItemReadonly: false,
            // 单个模板-正在操作的数据
            exampleItemData: {},
            // 下拉列表-性别
            sexList: [{
                value: 'all',
                label: '全部'
            },{
                value: '1',
                label: '男'
            },{
                value: '2',
                label: '女'
            }],
            // 查询-查询条件
            condiData: {
                goodId: '',
                goodName: '',
                goodPrice: ''
            },
            // 查询-列表数据
            listData: [],
            // 查询-分页数据
            pageData: {
                total: 0,
                pageSize: 10,
                pageCurrent: 1
            },

        }
    },
    methods: {
        // 查询功能--查询
        searchList () {
            let condiData = this.condiData
            let data = {
                goodId: condiData.goodId.trim(),
                goodName: condiData.goodName.trim(),
                goodPrice: condiData.goodPrice.trim(),
            }

            get(this.Api('queryGoodList'), data).then((res) => {
                if(res.status == this.statusCode.successCode) {
                    this.listData = res.content.dataList || [];
                    this.pageData.total = res.content.total;
                }
            });
        },
        // 查询功能--重置
        resetSearch () {
            this.condiData = {
                goodId: '',
                goodName: '',
                goodPrice: ''
            }
        },
        // 查询功能--页码变化
        listPageChange (index) {
            this.pageData.pageCurrent = index
            this.searchList()
        },
        // 查询功能--每页条数变化
        listPageSizeChange (index) {
            this.pageData.pageSize = index
            this.searchList()
        },

        // 新增,编辑,详情弹窗被关闭,参数:isReload 是否需要重新刷新数据
        hideExampleItemDialog (isReload) {
            if(isReload) {
                this.searchList();
            }
        },
        // 新增,编辑,详情弹窗打开时，初始化数据
        emptyExampleItemDialog () {
            this.isExampleItemEdit = false;
            this.isExampleItemReadonly = false;
            this.exampleItemData = {};
        },

        // 查询功能--新增-打开弹窗
        showAddListItemWin () {
            this.emptyExampleItemDialog();
            this.isExampleItemEdit = false;
            this.$store.commit('setDialogGoodItemVisible', true);
        },

        // 查询功能--修改-打开弹窗
        showEditListItemWin (item) {
            this.emptyExampleItemDialog();
            this.isExampleItemEdit = true;
            this.exampleItemData = JSON.parse(JSON.stringify(item));
            this.$store.commit('setDialogGoodItemVisible', true);
        },

        // 查询功能--删除
        delListItem (item) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.sendDelListItem(item);
            }).catch(() => {        
            });
        },
        // 执行删除
        sendDelListItem (item) {
            get(this.Api('delGoodItem'), {
                primaryId: item.primaryId
            }).then((res) => {
                if(res.status == this.statusCode.successCode) {
                    this.$message.success('删除成功');
                    this.searchList();
                }else {
                    this.$message.success(res.msg || '操作失败');
                }
            });
        },

        // 查询功能--展示详情-打开弹窗
        showDetailListItemWin (item) {
            this.emptyExampleItemDialog();
            this.isExampleItemReadonly = true;
            this.exampleItemData = JSON.parse(JSON.stringify(item));
            this.$store.commit('setDialogGoodItemVisible', true);
        },

    }
}
</script>

<style scoped lang="scss">
.view-ExampleList {
    min-height: 200px;
}
</style>
